<template>
    <div class="login">

        <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
            <div class="title">
                <span>v1.0</span>
            </div>

            <el-form-item prop="account">
                <el-input v-model="loginForm.account"
                          @change="funAccountChange"
                          ref="account" type="text"
                          auto-complete="off" placeholder="账号">
                    <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon"/>
                </el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input
                        ref="password"
                        v-model="loginForm.password"
                        type="password"
                        auto-complete="off"
                        placeholder="密码"
                        @keyup.enter.native="handleLogin">
                    <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon"/>
                </el-input>
            </el-form-item>
            <el-form-item prop="code" v-show="this.errorCode===1 || this.errorCode===2 || this.errorCode===99">
                <el-input
                        ref="code"
                        v-model="loginForm.code"
                        auto-complete="off"
                        placeholder="验证码"
                        style="width: 63%"
                        maxlength="4"
                        @keyup.enter.native="handleLogin">
                    <svg-icon slot="prefix" icon-class="yanzhengma" class="el-input__icon input-icon"/>
                </el-input>
                <!-- <el-tooltip class="item" effect="dark" content="点击刷新验证码" :open-delay="openDelay" placement="bottom">
                    <div class="login-code">
                        <img :src="codeUrl" @click="getCode"/>
                    </div>
                </el-tooltip> -->
            </el-form-item>
            <el-form-item style="width:100%; " v-show="this.errorCode!==1 && this.errorCode!==2 && this.errorCode!==99">
                <div style="font-size:12px; color: #999999; line-height:22px;padding: 0 5px;">
                    <b>温馨提醒:</b>
                    登录试错超过2次需要输入验证码；超过5次系统自动锁定1小时，可联系管理员解除锁定。
                </div>
            </el-form-item>
            <el-form-item style="width:100%; ">
                <el-button
                        :loading="loading"
                        size="medium"
                        type="primary"
                        style="width:100%;margin-top:20px;"
                        @click.native.prevent="handleLogin">
                    <span v-if="!loading">登 录</span>
                    <span v-else>登 录 中...</span>
                </el-button>

            </el-form-item>
             
        </el-form>
        <!--  底部  -->
        <div class="el-login-footer">
            <span> Copyright © 2021 itsoft All Rights Reserved.</span>
        </div>

        <div class="slider-globe2">
            <img class="slider-meteor" :src="Img1">
            <img class="slider-meteor2" :src="Img2">
        </div>
    </div>
</template>

<script>
    export default {
        name: 'Login',
        data() {
            return {
                openDelay: 300,
                codeUrl: "",
                loginForm: {
                    account: "",
                    password: "",
                    code: "",
                    uuid: "",
                    
                },
                loginRules: {
                    account: [
                        {required: true, trigger: "change", message: "用户名不能为空"}
                    ],
                    password: [
                        {required: true, trigger: "change", message: "密码不能为空"}
                    ],
                    code: []
                },
                loading: false,
                redirect: null,
                topath: null,
                titleShow: false,
                errorCode: 0,
                Img1: require('../assets/image/1.png'),
                Img2: require('../assets/image/2.png'),
                 
            }
        },
        methods: {
            handleLogin() {
                 //this.$router.push({path: "/home"})
                // 这里用replace 而不用push，解决避免浏览器回退再回到登录页面
                this.$router.replace("/home")
            },
            funAccountChange(){

            }
        }
    }
</script>

<style  lang="scss" scoped>
    .login {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        background-image: url("../assets/image/bg.jpg");
        background-size: cover;
    }


    .title {
        margin: 0 40px 40px;
        text-align: center;
        background: url("../assets/image/logo1.png") center center no-repeat;
        float: left;
        width: 260px;
        height: 50px;
        position: relative;

        span {
            font-size: 14px;
            color: #f1f1f1;
            position: absolute;
            right: -20px;
            background-color: #409EFF;
            top: 15px;
            padding: 3px 8px;
            border-radius: 4px
        }

    }

    .code {
        /*margin: 400px auto;*/
        width: 114px;
        height: 40px;
        /*border: 1px solid red;*/
    }

    .welcome {
        border-radius: 6px;
        background: #ffffff;
        width: 300px;
        height: 50px;
        padding: 20px 25px 5px 25px;
        text-align: center;

        span {

            font-weight: bold;
            font-size: 20px;
            color: #707070;
        }

        i {
            margin-left: 3px;
            margin-right: 3px;
            color: #888;
            font-size: 13px;
        }
    }

    .login-form {
        border-radius: 6px;
        background: #ffffff;
        width: 400px;
        height: 385px;
        padding: 20px 25px 5px 25px;
        z-index: 9;

        .el-input {
            height: 45px;

            input {
                height: 45px;
            }
        }

        .input-icon {
            height: 45px;
            width: 14px;
            margin-left: 4px;
        }
    }

    .login-tip {
        font-size: 13px;
        text-align: center;
        color: #bfbfbf;
    }

    .login-code {
        width: 34%;
        height: 42px;
        float: right;
        cursor: pointer;

        img {
            cursor: pointer;
            vertical-align: middle;
        }
    }

    .el-login-footer {
        height: 40px;
        line-height: 40px;
        position: fixed;
        bottom: 0;
        width: 100%;
        text-align: center;
        color: #fff;
        font-family: Arial;
        font-size: 12px;
        letter-spacing: 1px;
    }


    .slider-globe2 {
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -340px;
        margin-top: 160px;
        width: 700px;
        height: 600px;
        border-radius: 50%;
        -webkit-animation: rotate 10s infinite linear;
        animation: rotate 10s infinite linear;
    }

    .slider-meteor {
        position: absolute;
        left: 50%;
        top: 0;
        margin-left: -72px;
        margin-top: -5px;
    }

    .slider-meteor2 {
        position: absolute;
        right: 50%;
        bottom: 0;
        margin-right: -72px;
        margin-bottom: -5px;
    }
</style>


